<template>
  <div class="ele-body table-search">
    <el-card shadow="never">
      <table-list
          ref="table"
          :query-settings="[
            {type: 'select', name: '状态', field: 'Status', list: userStatus, width: 120},
          ]"
          row-key="UserID"
          url="/users"
          :columns="columns">
        <template slot="button-after">
          <el-form-item>
            <el-button
                v-if="power.create" type="primary" icon="el-icon-plus"
                class="ele-btn-icon" @click="addOrEdit(false)">
              添加
            </el-button>
          </el-form-item>
        </template>
        <template slot="Role" slot-scope="{row}">
          <el-tag type="success" v-if="Number(row.IsSuper) === 1">全部权限</el-tag>
          <template v-else>
            <el-tag v-for="(item, index) in row.RoleList" :key="index">
              {{ item.RoleName }}
            </el-tag>
          </template>
        </template>
        <template slot="action" slot-scope="{row}">
          <template v-if="power.groupAuth.action">
            <el-link v-if="power.update" @click="addOrEdit(row)" icon="el-icon-edit" type="primary" :underline="false">
              编辑
            </el-link>
            <template v-if="Number(row.UserStatus) === 1">
              <el-link v-if="power.editPass" @click="addOrEdit(row, 2)" icon="el-icon-lock" type="primary"
                       :underline="false">
                修改密码
              </el-link>
              <confirm-button
                  v-if="power.delete"
                  :status="Number(row.UserStatus)"
                  @confirm="(status) => updateStatus(status, row)"/>
            </template>
          </template>
          <template v-else> ---</template>
        </template>
      </table-list>
    </el-card>
    <!-- 编辑弹窗 -->
    <!-- 编辑密码 -->
    <user-edit-pwd :data="current" :visible.sync="showEditPass"/>
    <sys-user-save :data="current" :visible.sync="showEdit" @done="reload"/>
  </div>
</template>

<script>
import SysUserSave from './dialog/save'
import columns from '@/config/columns/users'
import UserEditPwd from './dialog/edit-password'
import { downConstantList } from '@/utils/common'
import ConfirmButton from '@/components/plugIn/confirm-button'

export default {
  name: 'sys-user-index',
  components: {
    SysUserSave,
    UserEditPwd,
    ConfirmButton
  },
  data () {
    return {
      // 列表定义
      columns,
      // 用户状态
      userStatus: downConstantList('SysUserStatus', false),
      // 当前编辑数据
      current: {},
      // 是否显示编辑弹窗
      showEdit: false,
      // 是否显示编辑弹窗-密码
      showEditPass: false,
      // 提交状态
      loading: false,
      // 权限
      power: {}
    }
  },
  created () {
    let auth = {
      create: 'users:create',
      update: 'users:update',
      editPass: 'users:reset-password',
      delete: 'users:delete',
    }
    this.power = this.$roleListPermission(auth, {
      action: ['update', 'editPass', 'delete']
    })
  },
  methods: {
    /* 刷新表格 */
    reload () {
      this.$refs.table.reload()
    },
    /* 编辑行 */
    addOrEdit (row, type = 1) {
      this.current = row ? Object.assign(row, {}) : {}
      if (type === 1) {
        this.showEdit = true
      } else if (type === 2) {
        this.showEditPass = true
      }
    },
    /* 删除行 */
    updateStatus (status, row) {
      const loading = this.$loading({ lock: true })
      this.$http.post('/users/status', { ID: row.UserID, Status: status }).then(res => {
        loading.close()
        if (res.data.code === 200) {
          this.$message.success(res.data.msg)
          this.reload()
        }
      }).catch(() => {
        loading.close()
      })
    },
  }
}
</script>
